<template>
	<view class="mainbgc">
		<u-tabs :list="tablist" @click="changetab"></u-tabs>
		<view class="mainpadding2">
			<!-- 专线 -->
			<view class="" v-if="tabcarrent==0">
				<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
					<view class="placeimage"></view>
				</view>
				<view class="" v-if="list.data.length">
					<view class="nav_a radius flex_wrap" v-for="item in list.data" :key="item.id"
						@click="jumpdetail('/pages/index/zhuanxianxq?id=',item.id)">
						<!-- 直达 -->
						<view class="xian ">
							<view class="zd flexbetween">
								<view class="flexleft">
									<view class="zhida" v-if="item.sfzz_status==0">直达</view>
									<view class="zhongzhuan" v-if="item.sfzz_status==1">中转</view>
									<view class="zhengzhou">{{item.sfcityinfo}}</view>
									<view class="huoche"></view>
									<view class="luoyang">{{item.ddcityinfo}}</view>
								</view>
								<view class="flexleft">
									<view class="hui">查看详情</view>
									<view class="right_icon flexright"></view>
								</view>
							</view>
						</view>
						<view class="nav_b">
							<view class="flexleft">
								<view class="left">
									<image :src="item.user.avatar_text" mode="" class="car_img"></image>
								</view>
								<view class="right">
									<view class="flexbetween">
										<view class="right_henan">{{item.shop.shop_name}}</view>
										<view class="vip" v-if="item.user.vip_status==1">VIP认证</view>
										<view class="header_pt" v-if="!item.user.vip_status && item.user.platform_status==1">平台认证</view>
									</view>
									<view class="flexleft flex_wrap">
										<view class="puhuo" v-for="ite in item.zx.flags" :key="ite">{{ite}}</view>
									</view>
								</view>
							</view>
							<!-- 地址 -->
							<view class="add flexbetween">
								<view class="flexleft">
									<view class="address">{{item.shop.cityinfo}}{{item.shop.address}}</view>
									<view class="km">{{kmUnit(Number(item.distance))}}</view>
								</view>
								<view class="flexleft">
									<view class="locations ii" @click.stop="openmap(item)"></view>
									<view class="phone" @click.stop="phone(item.user.mobile,item.id)"></view>
								</view>
							</view>
							<view class="liu flexbetween">
								<view class="liulan">浏览量：{{item.views}}</view>
								<view class="liulan">拨打量：{{item.call_num}}</view>
								<view class="liulan">转发量：{{item.share_num}}</view>
							</view>
						</view>
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>

			</view>

			<!-- 供求 -->
			<view v-if="tabcarrent==1">
				<view class="centers  flexleft flexcenter">
					<view class="all" :class="lable==1?'gongying':' xuqui'" @click="changelable(1)">需求</view>
					<view class="alls" :class="lable==2?'gongying':'xuqui'" @click="changelable(2)">供应</view>
				</view>
				<!-- 需求 -->
				<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
					<view class="placeimage"></view>
				</view>
				<view class="" v-if="list.data.length">
					<view class="center margin_top" v-for="item in list.data" :key="item.id"
						@click="jumpdetail('/pages/supply/gongyingxq?id=',item.id)">
						<view class="flexbetween flex_wrap">
							<view class="flexleft">
								<view class="image_ya">
									<image :src="item.user.avatar_text" mode=""></image>
								</view>
								<view class="center_zi ">
									<view class="word_hei">{{item.user.nickname}}</view>
									<view class="hui">{{item.createtime_text}}</view>
								</view>
							</view>
							<view class="flexleft">
								<view class="province_jiangsu">{{item.cityinfo}}</view>
							</view>
						</view>
						<view class="TV">
							<view class="hei margin_top">{{item.title}}</view>
						</view>
						<view class="hui">{{item.des}}</view>
						<!-- 图片 -->
						<view class="flexleft margin_top flex_wrap">
							<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
								<view class="item_image">
									<image :src="ite" mode=""></image>
								</view>
							</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="hui">浏览：{{item.views}}次</view>
							<view class="hui">分享：{{item.share_num}}</view>
							<view class="quigou hui">{{lable==1?"求购":"供应"}}：{{item.num}}</view>
						</view>
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>


			</view>
			<!-- 招标 -->
			<view v-if="tabcarrent==2">
				<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
					<view class="placeimage"></view>
				</view>
				<view class="" v-if="list.data.length">
					<view class="center margin_top" v-for="item in list.data" :key="item.id"
						@click="jumpdetail('/pages/index/zhaobiaoxmxq?id=',item.id)">
						<view class="flexbetween flex_wrap">
							<view class="flexleft">
								<view class="image_ya">
									<image :src="item.user.avatar_text" mode=""></image>
								</view>
								<view class="center_zi ">
									<view class="word_hei">{{item.user.nickname}}</view>
									<view class="hui">{{item.createtime_text}}</view>
								</view>
							</view>
							<view class="flexleft">
								<view class="province_jiangsu">{{item.cityinfo}}</view>
							</view>
						</view>
						<view class="TV">
							<view class="hei margin_top">{{item.title}}</view>
						</view>
						<view class="hui">{{item.des}}</view>
						<!-- 图片 -->
						<view class="flexleft margin_top flex_wrap">
							<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
								<view class="item_image">
									<image :src="ite" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>

			</view>
			<!-- 招聘 -->
			<view v-if="tabcarrent==3">
				<view class="centers  flexleft flexcenter">
					<view class="all" :class="lablezp==1?'gongying':' xuqui'" @click="changelablezp(1)">求职</view>
					<view class="alls" :class="lablezp==2?'gongying':'xuqui'" @click="changelablezp(2)">招聘</view>
				</view>
				<view class="" v-if="lablezp==1">
					<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="center margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/zhiwiexiangqing?',item.id)">

							<view class="flexbetween flex_wrap">
								<view class="flexleft">
									<view class="image_ya">
										<image :src="item.user.avatar_text" mode=""></image>
									</view>
									<view class="center_zi ">
										<view class="word_hei">{{item.user.nickname}}</view>
										<view class="hui">{{item.createtime_text}}</view>
									</view>
								</view>
								<view class="flexleft">
									<view class="province_jiangsu">{{item.cityinfo}}</view>
								</view>
							</view>
							<view class="flexleft flex_wrap">
								<view class="province_jiangsu margin_top1 margin_right1" v-for="ite in item.flags"
									:key="ite">{{ite}}</view>
							</view>
							<view class="flexbetween">
								<view class="hei margin_top">{{item.title}}</view>
								<view class="strongtext quigou">{{item.xz}}</view>
							</view>
							<view class="hui">{{item.des}}</view>
							<!-- 图片 -->
							<view class="flexleft margin_top flex_wrap">
								<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
									<view class="item_image">
										<image :src="ite" mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>
				</view>
				<view class="" v-show="lablezp==2">
					<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="center margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/zhaopingrxq?id=',item.id)">
							<view class="flexbetween flex_wrap">
								<view class="flexleft">
									<view class="image_ya">
										<image :src="item.user.avatar_text" mode=""></image>
									</view>
									<view class="center_zi ">
										<view class="word_hei">{{item.user.nickname}}</view>
										<view class="hui">{{item.createtime_text}}</view>
									</view>
								</view>
								<view class="flexleft">
									<view class="province_jiangsu">{{item.cityinfo}}</view>
								</view>
							</view>
							<view class="flexleft flex_wrap">
								<view class="province_jiangsu margin_top1 margin_right1" v-for="ite in item.flags"
									:key="ite">{{ite}}</view>
							</view>
							<view class="flexbetween">
								<view class="hei margin_top">{{item.title}}</view>
								<view class="strongtext quigou">{{item.xz}}</view>
							</view>
							<view class="hui">{{item.des}}</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>
				</view>

			</view>
			<!-- 企业 -->
			<view v-if="tabcarrent==4">
				<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
					<view class="placeimage"></view>
				</view>
				<view class="" v-if="list.data.length">
					<view class="nav_a  flex_wrap">
						<view class="nav_b  " v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/qiyexiangqing?id=',item.id)">
							<view class="flexleft">
								<view class="left">
									<image :src="item.user.avatar_text" mode="" class="car_img"></image>
								</view>
								<view class="right">
									<view class="flexbetween">
										<view class="right_henan">{{item.shop_name}}</view>
										<view class="vip" v-if="item.user.vip_status">VIP认证</view>
										<view class="header_pt" v-if="!item.user.vip_status && item.user.platform_status==1">平台认证</view>
									</view>
									<view class="flexleft flex_wrap">
										<view class="zhuying">主营：{{item.zyyw}}</view>
									</view>
								</view>
							</view>
							<!-- 地址 -->
							<view class="add flexbetween">
								<view class="flexleft">
									<view class="address">{{item.cityinfo}}{{item.address}}</view>
									<view class="km">{{kmUnit(Number(item.distance))}}</view>
								</view>
								<view class="flexleft">
									<view class="locations margin_right" @click.stop="openmaptwo(item)"></view>
									<view class="phone" @click.stop="phone(item.shoplx[0].mobile)"></view>
								</view>
							</view>
							<view class="look_details">查看详情</view>
						</view>
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>

			</view>
			<!-- 商品 -->
			<view v-if="tabcarrent==5">
				<view class="flexcenter" style="margin-top: 200rpx;" v-if="!list.data.length">
					<view class="placeimage"></view>
				</view>
				<view class="" v-if="list.data.length">
					<view class="flexbetween flex_wrap">
						<view class="shangpbox margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/shopping/shangpinxq?id=',item.id)">
							<view class="shangptp">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="mainpadding ffffff baibox">
								<view class="ershil lianghang">{{item.title}}</view>
								<view class="flexbetween margin_top">
									<view class="price">￥{{item.price}}</view>
									<view class="nostrongtext">{{item.sales}}人付款</view>
								</view>
							</view>
						</view>
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				tablist: [{
					name: '专线',
				}, {
					name: '供求',
				}, {
					name: '招标'
				}, {
					name: '招聘'
				}, {
					name: '企业'
				}, {
					name: '商品'
				}],
				tabcarrent: 0,
				lable: 1, //1需求,2供应
				lablezp: 1, //1招聘，2求职
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keywords: "",
				lat: "",
				lng: "",
			}
		},
		onLoad(options) {
			// this.keywords = ""
			this.keywords = options.text
		},
		onShow() {
			this.getlocation()
		},
		methods: {
			jumpdetail(urls, id) {
				uni.navigateTo({
					url: urls + id
				})
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			// 获取优选仓库列表
			init(isPage, page) {
				let _this = this;
				let url = ""
				let data = {}
				if (this.tabcarrent == 0) { //专线
					url = "/api/zx/zxList"
					data = {
						page: page || 1,
						limit: _this.limit,
						keywords: _this.keywords,
						lat: _this.lat,
						lng: _this.lng,
					}
				}
				if (this.tabcarrent == 1) { //供应，需求
					url = "/api/gx/gxList"
					data = {
						page: page || 1,
						limit: _this.limit,
						keywords: _this.keywords,
						type: _this.lable
					}
				}
				if (this.tabcarrent == 2) { //招标
					url = "/api/bidding/getBiddingList"
					data = {
						page: page || 1,
						limit: _this.limit,
						keywords: _this.keywords,
					}
				}
				if (this.tabcarrent == 3) { //招聘
					url = "/api/zp/zpList"
					data = {
						page: page || 1,
						limit: _this.limit,
						keywords: _this.keywords,
						type: _this.lablezp
					}
				}
				if (this.tabcarrent == 4) { //企业
					url = "/api/Company/shopList"
					data = {
						page: page || 1,
						limit: _this.limit,
						keywords: _this.keywords,
						lat: _this.lat,
						lng: _this.lng,
					}
				}
				if (this.tabcarrent == 5) {
					url = "/api/goods/goodsList"
					data = {
						page: page || 1,
						limit: _this.limit,
						keyword: _this.keywords || "",
					}
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				if (this.tabcarrent == 0) {
					return false
				}
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			openmaptwo(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.shop_name, //即将传到高德或腾讯地图的店铺名称
					address: item.cityinfo + item.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.shop.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.shop.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.shop.shop_name, //即将传到高德或腾讯地图的店铺名称
					address: item.shop.cityinfo + item.shop.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			phone(p, value) {
				if (value) {
					this.addboda(value)
				}
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
				})
			},
			addboda(value) {
				httpRequest.request('/api/zx/addZXListCallNum', 'GET', {
					id: value,
				}, false, false, true).then(res => {})
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			changetab(item) {
				this.tabcarrent = item.index
				this.init()
			},
			// 切换供需
			changelable(value) {
				this.lable = value
				this.init()
			},
			// 切换招聘
			changelablezp(value) {
				this.lablezp = value
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zhuying {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding-left: 19rpx;
		padding-top: 24rpx;
		//超出两行省略号
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ershil {
		height: 75rpx;
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	/deep/.u-tabs__wrapper__nav__item {
		//平均分配
		flex: 1;
		background-color: #fff;
	}

	.paddingleft {
		padding-left: 19rpx;
	}

	.bottomline {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, .01);
	}

	.addresstext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		text-align: center;
		width: 200rpx;
	}

	.wdfb {
		background-color: #F1F1F1;
	}

	.right_icon {
		margin-left: 9rpx;
	}

	.active {
		color: #228DFF;
	}

	.actived {
		color: #FFA500;
	}

	.content {
		padding: 30rpx 25rpx;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 20rpx 43rpx 21rpx 43rpx;
		margin: 30rpx 0rpx 0rpx 28rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 43rpx 21rpx 43rpx;
		margin: 30rpx 0rpx 0rpx 28rpx;
	}

	.center {
		background-color: #fff;
		padding: 35rpx 37rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.city {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.header {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 27rpx 28rpx 27rpx 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.gray {
		width: 8rpx;
		height: 12rpx;
		background-size: 100% 100%;
		padding-left: 6rpx;
	}

	// 
	.nav_b {
		padding: 36rpx 32rpx;
		background-color: #fff;
	}

	.right_henan {
		width: 300rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding-left: 19rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.puhuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 4rpx 18rpx 4rpx 18rpx;
		background-color: RGBA(233, 244, 255, 1);
		margin-top: 14rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-left: 14rpx;
	}

	.address {
		width: 280rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.km {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding-left: 16rpx;
	}

	.add {
		margin-top: 40rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		padding-bottom: 36rpx;
	}

	.ii {
		margin-right: 22rpx;
	}

	.liu {
		padding-top: 30rpx;
	}

	.liulan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nav_a {
		background: #FFFFFF;
		margin: 30rpx 0rpx 0rpx 0rpx;
	}

	.zhida {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		border: 1rpx solid rgba(34, 141, 255, 1);
		padding: 0rpx 10rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zhida2 {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		border: 1rpx solid rgba(34, 141, 255, 1);
		padding: 0rpx 10rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zhongzhuan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFA500;
		border: 1rpx solid rgba(255, 165, 0, 1);
		padding: 0rpx 10rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zhengzhou {
		padding: 0rpx 20rpx 0rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.zd {
		padding: 31rpx 32rpx;
	}

	.luoyang {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding: 0rpx 20rpx;
	}

	.xiangqing {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-right: 11rpx;
		padding-left: 261rpx;
	}

	.xian {
		border-bottom: 2rpx solid RGBA(247, 247, 247, 1);
	}

	.car_img {
		width: 132rpx;
		height: 132rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	// 


	.city {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding-left: 12rpx;
	}

	.nav_header {
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
	}

	.look {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.form {
		text-align: center;
		padding-top: 54rpx;
		padding-bottom: 61rpx;
	}

	.transport {
		height: 200rpx;
		padding: 0rpx 30rpx;
		overflow-x: hidden;
	}

	.chongzhi {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		border: 1rpx solid #228DFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 20rpx 128rpx 17rpx 129rpx;
	}

	.queren {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		background-color: rgba(34, 141, 255, 1);
		border: 1rpx solid #228DFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 20rpx 128rpx 17rpx 129rpx;
	}

	.footer {
		padding: 72rpx 30rpx;
	}

	.center_zi {
		padding: 0rpx 20rpx;
	}

	.hui_zi {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-top: 24rpx;
		//超出两行省略号
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.item_image_box {
		width: 25%;
	}

	.centers {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.center_a {
		padding: 100rpx 0rpx 30rpx 0rpx;
		background-color: #ffff;
	}

	.bottom_zi {
		padding-top: 30rpx;
	}

	.all {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.alls {
		background: #228DFF;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffff;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.xuqui {
		background: #fff;
		color: #228DFF;
		border: 2rpx solid #228DFF;
	}

	.gongying {
		background: #228DFF;
		color: #ffff;
		border: 2rpx solid #228DFF;
	}

	.quigou {
		color: #228DFF;
	}

	.shangpbox {
		width: 48%;
	}

	.jiagetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.yhxiank {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.trbox {
		margin-left: 10rpx;
	}


	.focustext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.sousuobox {
		width: 100%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.nostrongtext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>
